<template>
  <div class="dingjin">
    <div class="yingfu">
      <span>应付金额：</span><span>￥{{ z_money }}元</span>
    </div>
    <van-radio-group v-model="radio">
      <ul class="fuzhang">
        <li>
          <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt="" />
          <span>{{ fukuan[0].text }}</span>
          <van-radio class="radio_checke_fukuan_style" value="账户余额" name="账户余额"></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
          <span>{{ fukuan[1].text }}</span>
          <van-radio class="radio_checke_fukuan_style" value="支付宝" name="支付宝"></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/weixin.jpg" alt="" />
          <span>{{ fukuan[2].text }}</span>
          <van-radio class="radio_checke_fukuan_style" value="微信" name="微信"></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <div class="tongyi_yuedu">
      <van-checkbox class="ckecked_tongyi_ground_btn" v-model="checked" shape="square" />
      <span>同意</span>
      <span>《平价分时租车租赁协议》</span>
    </div>
    <van-button :disabled="!checked" class="buton_botom" type="info" @click="fukuantotongzhi">
      {{ radio }}
    </van-button>
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show2">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
            backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
            logoBackgroundColor="black"></vue-qr>
          <h2>请用微信扫码支付</h2>
          <div>订单的状态:{{ paystatus }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
            @click="yizhifu">
            已支付</van-button>
        </div>
      </van-popup>
    </div>
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show3">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
                  backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
                  logoBackgroundColor="black"></vue-qr>
          <h2>请用支付宝扫码支付</h2>
          <div>订单的状态:{{ paystatus }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                      @click="yizhifu1">
            已支付?</van-button>
        </div>
      </van-popup>
    </div>
    <div>
      <van-popup position="bottom" :style="{ width: '100%', height: '45%', padding: '10px' }" v-model="show1">
        <div>
          <span>已有金额: </span><span>￥{{ this.$store.state.user.accountBalance }}元</span>
          <p></p>
          <span>应付金额：</span><span>￥{{ price }}元</span>
          <!-- 优惠券单元格 -->
          <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="youhuojuan" />
          <!-- 优惠券列表 -->
          <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
            <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
              @change="onChange" @exchange="onExchange" />
          </van-popup>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
            @click="jinezhifu">
            支付</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  updateAllState,
  pay,
  getNativeCodeUrl2,
  getNativeCodeUrl3,
  queryPayStatus2,
  queryPayStatus3,
  updateAllState1,
  addorder,
  useCoupon,
  useAmount,
  createMQ1,
  user
} from "../../../request/userinfo/userinfo";
import { Notify } from "vant";
import vueQr from 'vue-qr';
import qs from 'qs';
Vue.use(vueQr);
export default {
  props: {},
  data() {
    return {
      accountBalance:'',
      show1: false,
      show2: false,
      show3:false,
      showList: false,
      radio: "账户余额",
      checked: false,
      fukuan: [{ text: "账户余额" }, { text: "支付宝" }, { text: "微信" }],
      z_money: 0,
      paystatus: "",
      code_url: "",
      preparidAmount: "",
      id: "",
      carId: "",
      startTime: "",
      memberId: "",
      endTime: "",
      brrowShop: "",
      returnShop: "",
      chosenCoupon: -1,
      price: "",
      price1:"",
      coupon: {
        id: '',
        // condition: '',
        // reason: '',
        // value: '',
        // name: '',
        // startAt: '',
        // endAt: '',
        // valueDesc: '',
        // unitDesc: '元',
      },
      coupons: [this.coupon]
    };
  },
  methods: {
    jinezhifu() {
      let hour=new Date().getHours();
      let minute = new Date().getMinutes();
      let second = new Date().getSeconds();
      if(this.chosenCoupon==-1){
        this.chosenCoupon = -1;
      }else {
        this.chosenCoupon = this.coupons[this.chosenCoupon].id;
      }
      if (this.radio == "微信") {
        this.show2=true;
        let hour=new Date().getHours();
        let minute = new Date().getMinutes();
        let second = new Date().getSeconds();
        getNativeCodeUrl2({
          couponId: this.chosenCoupon,
          preparidAmount: this.price,
          totalPrice: this.z_money,
          memberId: this.$store.state.user.id,
          orderno: this.$store.state.order.orderno,
          carId: this.$store.state.carinfo.id,
          startTime: this.$store.state.startime+" "+hour+":"+minute+":"+second,
          endTime: this.$store.state.endtime+" "+hour+":"+minute+":"+second,
          brrowShop: this.$store.state.brrowShop,
          returnShop: this.$store.state.brrowShop,
        })
          .then((res) => {
            console.log(res.data.code_url)
            this.code_url = res.data.code_url;
            this.id = res.data.id;
            this.preparidAmount = res.data.preparidAmount;
            this.$store.state.order.orderno = res.data.id;
            createMQ1({
              id:this.id
            }).then((res)=>{

            })
          });
      };
        if (this.radio == "支付宝") {
            let hour=new Date().getHours();
            let minute = new Date().getMinutes();
            let second = new Date().getSeconds();
            this.show3=true;
            //this.price = this.z_money;
            //this.price = this.price - this.coupons[this.chosenCoupon].valueDesc/1;
            getNativeCodeUrl3({
              couponId: this.chosenCoupon,
              preparidAmount: this.price,
              totalPrice: this.z_money,
              memberId: this.$store.state.user.id,
              orderno: this.$store.state.order.orderno,
              carId: this.$store.state.carinfo.id,
              startTime: this.$store.state.startime+" "+hour+":"+minute+":"+second,
              endTime: this.$store.state.endtime+" "+hour+":"+minute+":"+second,
              brrowShop: this.$store.state.brrowShop,
              returnShop: this.$store.state.brrowShop,
            })
            .then((res) => {
              console.log(res)
                this.code_url = res.data.url;
                this.id = res.data.orderId;
                this.preparidAmount = res.data.money;
                this.$store.state.order.orderno = res.data.id;
                // createMQ({
                //   id:this.id
                // }).then((res)=>{
                //
                // })
            });
        };
        if (this.radio == "账户余额") {
        this.show1 = true;
        // this.price = this.z_money;
        useCoupon({
          shopId: this.$store.state.brrowShop,
          memberId: this.$store.state.user.id
        })
          .then((res) => {
            var newData = [];
            for (var i = 0; i < res.data.length; i++) {
              var obj = {
                name: res.data[i].cname,
                value: res.data[i].amount * 100,
                id: res.data[i].id,
                valueDesc: res.data[i].amount,
                unitDesc: '元',
                condition: res.data[i].cname,
                startAt: parseInt(new Date(res.data[i].startTime).getTime()/1000),
                endAt: parseInt(new Date(res.data[i].endTime).getTime()/1000),

              };
              newData.push(obj);
              console.log("-----------------")
              console.log(newData)
            }
            this.coupons = newData;
            if (newData == null) {
              this.components = this.coupon;
            }
          });
        if (this.$store.state.user.accountBalance < this.price) {
          Notify({ type: "danger", message: "余额不足请充值" });
          this.$router.push('/wallet');
        }else{
          useAmount({
            orderno: this.$store.state.order.orderno,
            couponId: this.chosenCoupon,
            preparidAmount: this.price,
            totalPrice: this.z_money,
            memberId: this.$store.state.user.id,
            carId: this.$store.state.carinfo.id,
            startTime: this.$store.state.startime+" "+hour+":"+minute+":"+second,
            endTime: this.$store.state.endtime+" "+hour+":"+minute+":"+second,
            brrowShop: this.$store.state.brrowShop,
            returnShop: this.$store.state.brrowShop,
            payStyle: this.$store.state.payStyle[0].code
          })
                  .then((res) => {
                    if(res.code===2000){
                      this.$store.state.order = res.data;
                      this.$store.state.order.orderno=res.data.orderno;
                      this.$router.push("/dingdantongzhi");
                      this.show1 = false;
                    }else if(res.code == 5008){
                      Notify({ type: "danger", message: "余额不足请充值" });
                    }
                    console.log(res);

                  });
        }
        if(this.price<0){
          Notify({ type: "danger", message: "订单金额不能小于0" });
        }
      }

    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      this.price = this.price - this.coupons[this.chosenCoupon].valueDesc/1;
      if(this.price<0){
        this.price=0
      }
    },
    youhuojuan() {
      this.showList = true;
      this.price = this.z_money;
      useCoupon({
        shopId: this.$store.state.brrowShop,
        memberId: this.$store.state.user.id
      })
        .then((res) => {
          var newData = [];
          for (var i = 0; i < res.data.length; i++) {
            var obj = {
              name: res.data[i].cname,
              value: res.data[i].amount * 100,
              id: res.data[i].id,
              valueDesc: res.data[i].amount,
              unitDesc: '元',
              condition: res.data[i].cname,
              startAt: parseInt(new Date(res.data[i].startTime).getTime()/1000),
              endAt: parseInt(new Date(res.data[i].endTime).getTime()/1000),

            };
            newData.push(obj);
            console.log("-----------------")
            console.log(newData)
          }
          this.coupons = newData;
          if (newData == null) {
            this.components = this.coupon;
          }
        });
    },
    yizhifu() {
      queryPayStatus2({
        id: this.id
      })
        .then((r) => {
          this.paystatus = r.msg;
          if (this.paystatus == "支付成功") {
            this.show2=false;
            updateAllState({
              couponId: this.chosenCoupon,
              preparidAmount:  this.price,
              id: this.id,
              memberId: this.$store.state.user.id
            }).then((res)=>{
              this.$router.push("/dingdantongzhi");

            })
          } else {
            alert("未检测到支付完成，请重新点击按钮");
          }
        });
    },
    yizhifu1() {
      queryPayStatus3({
        id: this.id,

      })
        .then((r) => {
          console.log(r)
          this.paystatus = r.msg;
          if (this.paystatus == "支付成功") {
            this.show3=false;
            updateAllState1({
              preparidAmount:  this.price,
              id: this.id,
              couponId: this.chosenCoupon,
              memberId: this.$store.state.user.id
            }).then((res)=>{
              this.$router.push("/dingdantongzhi");

            })
          } else {
            alert("未检测到支付完成，请重新点击按钮");
          }
        });
    },
    fukuantotongzhi() {
      // "2020-11-26 08:18:55 "
      let stime = this.$store.state.startime_;
      let etime = this.$store.state.endtime_;
      let new_stime =
        stime.getFullYear() +
        "-" +
        (stime.getMonth() + 1) +
        "-" +
        stime.getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds();
      let new_etime =
        etime.getFullYear() +
        "-" +
        (etime.getMonth() + 1) +
        "-" +
        etime.getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds();
      console.log(new_stime);
      console.log(this.z_money, this.$store.state.user.accountBalance);
      if (this.radio == "微信") {
        this.show1 = true;
        this.price = this.z_money;
        useCoupon({
          shopId: this.$store.state.brrowShop,
          memberId: this.$store.state.user.id
        })
          .then((res) => {
            var newData = [];
            for (var i = 0; i < res.data.length; i++) {
              var obj = {
                name: res.data[i].cname,
                value: res.data[i].amount * 100,
                id: res.data[i].id,
                valueDesc: res.data[i].amount,
                unitDesc: '元',
                condition: res.data[i].cname,
                startAt: parseInt(new Date(res.data[i].startTime).getTime()/1000),
                endAt: parseInt(new Date(res.data[i].endTime).getTime()/1000),
              };
              newData.push(obj);
              // console.log("-----------------")
              // console.log(newData)
            }
            this.coupons = newData;
            if (newData == null) {
              this.components = this.coupon;
            }
          });
      }
      if (this.radio == "支付宝") {
        this.show1 = true;
        this.price = this.z_money;
        useCoupon({
          shopId: this.$store.state.brrowShop,
          memberId: this.$store.state.user.id
        })
        .then((res) => {
          var newData = [];
          for (var i = 0; i < res.data.length; i++) {
            var obj = {
              name: res.data[i].cname,
              value: res.data[i].amount * 100,
              id: res.data[i].id,
              valueDesc: res.data[i].amount,
              unitDesc: '元',
              condition: res.data[i].cname,
              startAt: parseInt(new Date(res.data[i].startTime).getTime()/1000),
              endAt: parseInt(new Date(res.data[i].endTime).getTime()/1000),
            };
            newData.push(obj);
            // console.log("-----------------")
            // console.log(newData)
          }
          this.coupons = newData;
          if (newData == null) {
            this.components = this.coupon;
          }
        });
      }
      if (this.radio == "账户余额") {
        this.show1 = true;
        this.price = this.z_money;
        user({}).then((res) => {
          console.log(res.data)
          this.$store.state.user = res.data;
          this.$store.state.user.accountBalance = res.data.accountBalance;
        });
        useCoupon({
          shopId: this.$store.state.brrowShop,
          memberId: this.$store.state.user.id
        })
                .then((res) => {
                  var newData = [];
                  for (var i = 0; i < res.data.length; i++) {
                    var obj = {
                      name: res.data[i].cname,
                      value: res.data[i].amount * 100,
                      id: res.data[i].id,
                      valueDesc: res.data[i].amount,
                      unitDesc: '元',
                      condition: res.data[i].cname,
                      startAt: parseInt(new Date(res.data[i].startTime).getTime()/1000),
                      endAt: parseInt(new Date(res.data[i].endTime).getTime()/1000),
                    };
                    newData.push(obj);
                  }
                  this.coupons = newData;
                  if (newData == null) {
                    this.components = this.coupon;
                  }
                });
      }
    },
  },
  mounted() {
    let money = this.$store.state.carinfo.price;
    let stime = this.$store.state.startime_;
    let etime = this.$store.state.endtime_;
    //alert("money"+money+"stime"+stime+"etime"+etime)
    let time = (etime - stime) / 24 / 60 / 60 / 1000;
    this.z_money = (money - 0) * time;
    // console.log(this.$store.state.carinfo.id)
    // onExchange = (code) => {
    //   coupons.value.push(coupon);
    // };
    user({}).then((res) => {
      console.log(res.data)
      this.$store.state.user = res.data;
      this.$store.state.user.accountBalance = res.data.accountBalance;
    });

  },
  components: {},
};
</script>

<style scoped lang="less">
.dingjin {
  width: 100%;
  margin-top: 0.05rem;
  font-size: 15px;

  .yingfu {
    width: 95%;
    height: 0.73rem;
    margin: 0 auto;
    border-radius: 0.08rem;
    background: white;
    line-height: 0.73rem;
    padding-left: 0.15rem;

    span {
      font-size: 0.25rem;
      font-weight: 600;
    }

    span:last-child {
      color: #f0230e;
    }
  }

  .fuzhang {
    width: 95%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    position: relative;

    li {
      flex: 1;
      display: flex;
      align-items: center;

      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }

      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }

  .tongyi_yuedu {
    width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;

    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }

    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }

  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }

  .sg-qrcode {
    /*color: deepskyblue;*/
    color: #2ba245;
  }
}
</style>
